<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .denglu {
        width: 100%;
        height: 700px;
        background-image: url(./img/京东登录.png);
        background-repeat: no-repeat;
        background-size: 100%;
        padding-top: 50px;
      }
      img {
        float: left;
      }
      h1 {
        float: left;
        margin-top: 40px;
      }
      .box1 {
        width: 300px;
        height: 400px;
        background-color: #fff;
        margin: 100px 0 0 1200px;
      }
      .box2 {
        color: red;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid rgb(226, 226, 226);
      }
      .box3 {
        padding-top: 30px;
        text-align: center;
      }
      input {
        width: 200px;
        height: 30px;
        margin-top: 20px;
        outline: none;
      }
      .ipt {
        width: 230px;
        padding-left: 20px;
      }
      .btn {
        color: #fff;
        background-color: red;
        margin-top: 50px;
      }
      a {
        margin: 80px 40px 0 0;
        float: right;
      }
    </style>
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <div style="overflow: hidden">
      <img src="./img/jd狗.png" alt="" />
      <h1>欢迎登录</h1>
    </div>
    <div class="denglu">
      <div class="box1">
        <div class="box2">
          <h3>账户登录</h3>
        </div>
        <div class="box3">
          <input type="text" placeholder="用户名" class="ipt" />
          <input type="text" placeholder="密码" class="ipt" />
          <input type="button" value="登录" class="btn" />
        </div>
        <a href="./注册页面.html">立即注册</a>
      </div>
    </div>
    <script>
      let ipt = document.querySelectorAll("input");
      ipt[2].onclick = function () {
        let uname = ipt[0].value;
        let pword = ipt[1].value;
        let API = "http://jx.xuzhixiang.top/ap/api/login.php";
        axios
          .get(API, { params: { username: uname, password: pword } })
          .then((res) => {
            let r = res.data;
            // console.log(r.data);
            // console.log(r.data.id);
            if (r.code == 1) {
              alert(r.msg);
              location.href = "./JDhome.html";
              localStorage.setItem("id", r.data.id);
              localStorage.setItem("username", r.data.username);
              localStorage.setItem("password", r.data.password);
              localStorage.setItem("token", r.data.token);
            } else {
              alert("请检查用户名和密码");
            }
          });
      };
    </script>
  </body>
</html>
